<template>
  <el-dialog :destroy-on-close="true" style="width: 40%;padding: 0 2%;">
    <template #header="{ titleId, titleClass }">
      <div style="height: 30px;margin-top: -2%;">
        <h4 :id="titleId" :class="titleClass">配套服务</h4>
      </div>
    </template>
    <div v-if="dialogVisible" class="box" @click.stop="clickHandler">
      <h4>基础设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="1">
          <span class="iconfont icon-wifi"></span>
          <span>免费WiFi</span>
        </div>
        <div class="s_box" data-n="2">
          <span class="iconfont icon-wangluo-"></span>
          <span>网络</span>
        </div>
        <div class="s_box" data-n="3">
          <span class="iconfont icon-tingchechang"></span>
          <span>停车场</span>
        </div>
      </div>
      <h4>商务设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="4">
          <span class="iconfont icon-shangwuzhongxin"></span>
          <span>商务中心</span>
        </div>
        <div class="s_box" data-n="5">
          <span class="iconfont icon-huiyiguanli"></span>
          <span>会议厅</span>
        </div>
        <div class="s_box" data-n="6">
          <span class="iconfont icon-touyingyi"></span>
          <span>多功能厅</span>
        </div>
      </div>
      <h4>酒店设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="7">
          <span class="iconfont icon-xiyiji"></span>
          <span>洗衣服务</span>
        </div>
        <div class="s_box" data-n="8">
          <span class="iconfont icon-feiji"></span>
          <span>接机服务</span>
        </div>
        <div class="s_box" data-n="9">
          <span class="iconfont icon-hanglixiang"></span>
          <span>行李寄存</span>
        </div>
        <div class="s_box" data-n="10">
          <myIcon></myIcon>
          <span>儿童看护</span>
        </div>
      </div>
      <h4>餐饮设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="11">
          <span class="iconfont icon-canpinhui-xican"></span>
          <span>西餐厅</span>
        </div>
        <div class="s_box" data-n="12">
          <span class="iconfont icon-shaozikuaizi"></span>
          <span>中餐厅</span>
        </div>
        <div class="s_box" data-n="13">
          <span class="iconfont icon-kafei"></span>
          <span>咖啡厅</span>
        </div>
        <div class="s_box" data-n="14">
          <span class="iconfont icon-songcanfuwu"></span>
          <span>送餐服务</span>
        </div>
        <div class="s_box" data-n="15">
          <span class="iconfont icon-hongjiu"></span>
          <span>酒吧</span>
        </div>
      </div>
      <h4>娱乐设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="16">
          <span class="iconfont icon-youyongchi"></span>
          <span>游泳池</span>
        </div>
        <div class="s_box" data-n="17">
          <span class="iconfont icon-jianshen"></span>
          <span>健身房</span>
        </div>
        <div class="s_box" data-n="18">
          <span class="iconfont icon-huatong-KTV"></span>
          <span>KTV</span>
        </div>
        <div class="s_box" data-n="19">
          <span class="iconfont icon-youleyuan"></span>
          <span>游乐园</span>
        </div>
        <div class="s_box" data-n="20">
          <span class="iconfont icon-majiangzhuo"></span>
          <span>棋牌室</span>
        </div>
        <div class="s_box" data-n="21">
          <span class="iconfont icon-lanqiu"></span>
          <span>运动场</span>
        </div>
      </div>
      <h4>客房设施</h4>
      <div class="h_box">
        <div class="s_box" data-n="22">
          <span class="iconfont icon-louceng"></span>
          <span>楼层</span>
        </div>
        <div class="s_box" data-n="23">
          <span class="iconfont icon-chuanghu"></span>
          <span>窗户</span>
        </div>
        <div class="s_box" data-n="24">
          <span class="iconfont icon-yugang"></span>
          <span>浴缸</span>
        </div>
        <div class="s_box" data-n="25">
          <span class="iconfont icon-peitaosheshixiaotubiao_linyu"></span>
          <span>淋浴</span>
        </div>
        <div class="s_box" data-n="26">
          <span class="iconfont icon-reshui"></span>
          <span>热水</span>
        </div>
        <div class="s_box" data-n="27">
          <span class="iconfont icon-24gl-phoneLoudspeaker"></span>
          <span>国内长途</span>
        </div>
        <div class="s_box" data-n="28">
          <span class="iconfont icon-bingxiang"></span>
          <span>冰箱</span>
        </div>
        <div class="s_box" data-n="29">
          <span class="iconfont icon-safe"></span>
          <span>保险箱</span>
        </div>
      </div>
    </div>
    <querenQuxiao @okHandler="okHandler" @cancelHandler="cancelHandler"></querenQuxiao>
    <div style="clear: both;"></div>
  </el-dialog>
</template>

<script>
import { h, handleError } from 'vue'
import { ElNotification } from 'element-plus'
import querenQuxiao from './queren_quxiao.vue'
export default {
  components: { querenQuxiao },
  props: ['dialogVisible'],
  data() {
    return {
      arr: [],
      peitaoArr: ['免费WiFi', '网络', '停车场', '商务中心', '会议厅', '多功能厅', '洗衣服务', '接机服务', '行李寄存', '儿童看护', '西餐厅', '中餐厅', '咖啡厅', '送餐服务', '酒吧', '游泳池', '健身房', 'KTV', '游乐园', '棋牌室', '运动场', '楼层', '窗户', '浴缸', '淋浴', '热水', '国内长途', '冰箱', '保险箱'],
      colorArr: []
    }
  },
  methods: {
    clickHandler($evt) {
      if ($evt.target.tagName == 'DIV') {
        if ($evt.target.getAttribute('class') == 's_box') {
          if ($evt.target.style.color && $evt.target.style.color == 'deepskyblue') {
            $evt.target.style.color = '#666666'
            $evt.target.style.border = '1px solid #999999'
          }
          else {
            $evt.target.style.color = 'deepskyblue'
            $evt.target.style.border = '1px solid deepskyblue'
          }
          var a = $evt.target.getAttribute('data-n') - 1
        }
      } else if ($evt.target.tagName == 'SPAN') {
        if ($evt.target.parentElement.style.color && $evt.target.parentElement.style.color == 'deepskyblue') {
          $evt.target.parentElement.style.color = '#666666'
          $evt.target.parentElement.style.border = '1px solid #999999'
        }
        else {
          $evt.target.parentElement.style.color = 'deepskyblue'
          $evt.target.parentElement.style.border = '1px solid deepskyblue'
        }
        var a = $evt.target.parentElement.getAttribute('data-n') - 1
      }
      if (this.arr.length == 0) {
        this.arr.push(this.peitaoArr[a])
        this.colorArr.push(a + 1)
      } else {
        if (this.arr.includes(this.peitaoArr[a])) {
          this.arr = this.arr.filter(item => item != this.peitaoArr[a])
          this.colorArr = this.colorArr.filter(item => item != a + 1)
        }
        else {
          this.arr.push(this.peitaoArr[a])
          this.colorArr.push(a + 1)
        }
      }
    },
    okHandler() {
      this.$emit('dialogOk', { arr: this.arr })
    },
    cancelHandler() {
      this.$emit('dialogCancel');
    },
    open1() {
      ElNotification({
        title: 'Error',
        message: '不要超过四个服务呦',
        type: 'error',
      })
    }
  },
  watch: {
    arr: {
      deep: true,
      handler() {
        if (this.colorArr.length > 4) {
          this.open1()
        }
      }
    },
    dialogVisible() {
      this.arr = []
      this.colorArr = []
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 545px;
  padding-left: 27px;
  margin-top: -30px;
  margin-bottom: 40px;

  .h_box {
    display: flex;
    flex-wrap: wrap;
    width: 518px;
    text-align: center;

    .s_box {
      height: 70px;
      width: 65px;
      margin-left: 18px;
      border: 1px solid #999999;
      border-radius: 5px;
      margin-bottom: 10px;
      color: #666666;
      cursor: pointer;

      span {
        display: block;
        font-size: 10px;
      }

      :first-child {
        margin: 8px 0;
      }
    }
  }
}
</style>